<div class="header"></div>

<mat-sidenav-container class="manage-sidenav-container">
  <mat-sidenav class="mat-elevation-z2" mode="side" [opened]="true">

    <mat-nav-list class="nav-list">
      <h3 mat-subheader>
        <span>联系人</span>
      </h3>
      <a class="nav-item" mat-list-item>
        <h3 class="nav-title" mat-line>
          <span class="text">亲人</span>
        </h3>
      </a>
      <a class="nav-item" mat-list-item>
        <h3 class="nav-title" mat-line>
          <span class="text">朋友</span>
        </h3>
      </a>
      <a class="nav-item" mat-list-item>
        <h3 class="nav-title" mat-line>
          <span class="text">同事</span>
        </h3>
      </a>
    </mat-nav-list>

  </mat-sidenav>


  <div fxFlex class="manage-sidenav-content">

    <div class="stbui-table-main mat-elevation-z2">
      <div class="stbui-table-toolbar" fxLayout="row" fxLayoutAlign="start center">
        <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="51px">
          <span></span>
        </div>
        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>姓名</span>
        </div>
        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>手机</span>
        </div>
        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>关系</span>
        </div>
        <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
          <span>单位</span>
        </div>

        <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
          <span>邮箱</span>
        </div>

      </div>

      <div class="stbui-table-list">
        <div class="stbui-table" fxLayout="row" *ngFor="let data of tables.datas" (click)="onUpdateContact(data)">
          <div class="start-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex="51px">
            <img [src]="data.avatar" alt="avatar" class="avatar">
          </div>

          <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
            <span>{{ data.name }}</span>
          </div>

          <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
            <span>{{ data.phone }}</span>
          </div>

          <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
            <span>{{ data.relation }}</span>
          </div>

          <div class="content-wrapper" fxLayout="row" fxLayoutAlign="start center" fxFlex>
            <span>{{ data.company }}</span>
          </div>

          <div class="end-wrapper" fxLayout="row" fxLayoutAlign="end center" fxFlex="80px">
            <span>{{ data.mail }}</span>
          </div>
        </div>
      </div>
    </div>

  </div>

  <button mat-fab class="contact-add-btn"><mat-icon>person_add</mat-icon></button>

</mat-sidenav-container>


